<script setup lang="ts">
import { incrementNumber } from '@/utils/index';
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
import { incrementNumberComputed } from '../../utils';

// 数据
interface IData {
  // 色值
  icon: string;
  // 标题
  title: string;
  // 数量
  count: number;
  // 百分比
  percent: number;
}

const sum = ref(0)
const data = ref<IData[]>([])

const dotColors = [
  '#179AFF',
  '#1CDBFF',
  '#FF4A4A',
  '#FF7734',
  '#FFC97B',
  '#8D70F4',
  '#5A77FF',
  '#33D7C9',
  '#FFD733',
  '#FF8D33',
];

onMounted(() => {
  // TODO: 接口回来
  incrementNumber(21, 800, sum)

  data.value = [
    { icon: '#179AFF', title: '基地', count: 3, percent: 32 },
    { icon: '#1CDBFF', title: '枢纽', count: 3, percent: 32 },
    { icon: '#FF4A4A', title: '直升机起降场', count: 2, percent: 32 },
    { icon: '#FF7734', title: '跑道型起降场', count: 1, percent: 32 },
    { icon: '#FFC97B', title: '无人机起降点', count: 21, percent: 32 },
  ].map((item) => {
    return {
      ...item,
      count: incrementNumberComputed(item.count, 1000),
      percent: incrementNumberComputed(item.percent, 1000),
    }
  }) as any

  // 初始化echarts
  const chartDom = document.getElementById('landingChart') as HTMLElement;
  const myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      show: false
    },
    series: [
      {
        name: '起降场',
        type: 'pie',
        radius: ['60%', '80%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'center',
          formatter: '起降场\n数量(个)',
          color: '#fff',
          fontSize: 16,
          lineHeight: 24
        },
        labelLine: {
          show: false
        },
        data: data.value.map((item, index) => ({
          value: item.count,
          name: item.title,
          itemStyle: { color: dotColors[index % dotColors.length] }
        }))
      }
    ]
  };
  myChart.setOption(option);
})

// TODO: 点击降落场
const handleClick = (item: IData) => {
  console.log(item);
}
</script>

<template>
  <div class="landing">
    <div class="landing-header"></div>
    <div class="landing-content">
      <div class="card-title">
        <h1>起降场数量</h1>
        <span class="card-title-num">
          <span class="card-title-num-num">{{ sum }}</span>
          <span class="card-title-num-unit">个</span>
        </span>
      </div>
      <div class="landing-content-data">
        <div class="landing-content-data-chart" id="landingChart"></div>
        <div class="landing-content-data-list">
          <div class="landing-content-data-list-item" v-for="(item, index) in data" :key="index" @click="handleClick(item)">
            <div class="landing-content-data-list-item-left">
              <span class="landing-content-data-list-item-left-icon" :style="{ background: item.icon }"></span>
              <span class="landing-content-data-list-item-left-title">{{ item.title }}</span>
            </div>
            <div class="landing-content-data-list-item-right">
              <span class="landing-content-data-list-item-right-count">{{ item.count }}个</span>
              <span class="landing-content-data-list-item-right-percent">{{ item.percent }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.landing {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: linear-gradient(287deg, rgba(2, 53, 115, 0.6) 10%, rgba(2, 53, 115, 0.4) 39%, rgba(41, 162, 255, 0.2) 113%);
  backdrop-filter: blur(4px);

  &-header {
    width: 100%;
    height: 74px;
    margin-top: -38px;
    margin-bottom: 6px;
    background-image: url('@/assets/facility/landing-header.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  &-content {
    box-sizing: border-box;
    width: 100%;
    height: 312px;
    padding: 10px 20px 20px 20px;

    .card-title {
      margin-bottom: 24px;
    }
    .card-title-num-num{
      font-family: YouSheBiaoTiHei;
      font-size: 30px;
    }

    &-data {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;

      &-chart {
        width: 130px;
        height: 130px;
        margin-right: 42px;
        position: relative;
      }

      &-list {
        flex: 1;

        &-item {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          &:last-child {
            margin-bottom: 0;
          }

          &-left {
            display: flex;
            flex-direction: row;
            align-items: center;

            &-icon {
              width: 10px;
              height: 10px;
              border-radius: 50%;
              margin-right: 12px;
            }

            &-title {
              font-size: 14px;
              font-weight: normal;
              line-height: 28.8px;
              letter-spacing: normal;
              color: #FFFFFF;
            }
          }

          &-right {

            &-count {
              font-size: 14px;
              font-weight: normal;
              line-height: 29px;
              letter-spacing: normal;
              color: #FFFFFF;
              margin-right: 8px;
            }

            &-percent {
              font-family: YouSheBiaoTiHei;
              font-size: 20px;
              font-weight: bold;
              line-height: 23.04px;
              letter-spacing: normal;
              /* 文字颜色/主标题&一级标题 */
              color: #FFFFFF;
            }
          }
        }
      }
    }
  }
}
</style>
